<style scoped>
    .form-out{
        width: 500px;
        margin: 0 auto;
        margin-top: 30px;
    }
</style>
<template>
    <div class="form-out">
        <Form ref="formItem" :rules="ruleValidate" :model="formItem" :label-width="80">
            <FormItem label="文章名称" prop="article_name">
                <Input v-model="formItem.article_name" placeholder="请输入文章名称"></Input>
            </FormItem>
            <FormItem label="文章作者" prop="article_author">
                <Input v-model="formItem.article_author" placeholder="请输入文章作者"></Input>
            </FormItem>
            <FormItem label="分类名称" prop="category_id">
                <Select v-model="formItem.category_id">
                    <Option v-for="(item,index) in titleList" :value="item.id" :key="index">{{ item.title }}</Option>
                </Select>
            </FormItem>
            <FormItem>
                <Button :loading="btnLoading" type="primary" @click="handleSubmit(formItem)">提交</Button>
                <Button @click="handleReset(formItem)" style="margin-left: 10px">重置</Button>
            </FormItem>
        </Form>
    </div>
</template>

<script>
import { addArticle, getCategoryList } from '@/api/manager'
import { date2str } from '@/api/user'
export default {
  name: 'addArticle',
  data () {
    return {
      ruleValidate: {
        article_name: [
          { required: true, message: '文章名称不能为空', trigger: 'blur' }
        ],
        article_author: [
          { required: true, message: '文章作者不能为空', trigger: 'blur' }
        ],
        category_id: [
          { required: true, message: '分类名称不能为空', trigger: 'change' }
        ]
      },
      formItem: {
        article_name: '',
        article_author: '',
        category_id: ''
      },
      value: '',
      model1: '',
      titleList: [],
      btnLoading: false
    }
  },
  methods: {
    handleReset () {
      this.formItem = {}
    },
    init () {
      getCategoryList().then(ret => {
        this.titleList = ret.data.data.list
      })
    },
    // getValue (param) {
    //   this.formItem.category_id = param.value
    //   this.formItem.category_name = param.label
    // },
    handleSubmit (formItem) {
      this.$refs['formItem'].validate((valid) => {
        if (valid) {
          this.btnLoading = true
          this.formItem.release_time = date2str(this.formItem.release_time)
          addArticle(this.formItem).then(ret => {
            let data = ret.data
            if (data.errcode === 1001) {
              this.$Message.success('保存成功！')
              this.btnLoading = false
              this.$router.push({
                name: 'cmsArticlesManagement'
              })
            } else {
              this.btnLoading = false
              this.$Message.error('保存失败！')
            }
          })
        } else {
          this.$Message.error({
            content: '操作失败,请核对添加信息后重试'
          })
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>
